30 / 50

How can you style invalid form inputs without JavaScript?

Styling Invalid Form Inputs Using :invalid Pseudo-Class in CSS

You can style invalid form inputs directly using the :invalid pseudo-class in CSS. It allows you to provide visual feedback for inputs that fail HTML5 validation constraints without needing JavaScript.

Key Points About :invalid

1
:invalid – Selects form elements whose current value does not satisfy HTML validation requirements (e.g., required fields, pattern mismatches, min/max values).
2
:valid – Can be used alongside :invalid to style inputs that pass validation.
3
Styles update dynamically as users interact with the form, giving immediate feedback.

Example: Styling Invalid Inputs

In this example, the email and age fields automatically receive a red border and light red background when their values are invalid, and a green border with light green background when valid, giving clear visual cues to the user.

Best Practices

1
Combine :invalid with :valid to give real-time validation feedback.
2
Use additional pseudo-classes like :required or :optional for better user guidance.
3
Ensure that color cues are accessible; consider adding icons or text messages for users with color vision deficiencies.
4
Test across browsers, as some older browsers may not fully support HTML5 validation pseudo-classes.

Difficulty: 3/10

Topics: CSS pseudo-classes, form validation styling, native HTML validation

Scenario Questions

0-2 years experience

1
How would you make a required email input turn red when the user submits the form without entering anything?
2
What CSS rule would you write to highlight a phone input as invalid if it doesn't match a 10-digit pattern?

2-5 years experience

1
A form input is visually invalid even though the user entered valid data — what could be wrong with the CSS or HTML structure?
2
You're told users aren't noticing invalid fields on mobile — how would you improve visibility without JavaScript, and what tradeoffs might you consider?

5-8 years experience

1
How would you design a reusable form component library that styles invalid inputs consistently across 20+ forms, while accommodating different design systems and accessibility requirements?
2
A legacy form uses inline styles and JavaScript for validation — how would you migrate to pure CSS-based validation without breaking existing behavior or accessibility?

8+ years experience

1
You're leading a cross-team initiative to standardize form validation UX across 50+ products — how do you balance CSS-only styling with accessibility, internationalization, and legacy browser support?
2
How would you architect a validation styling system that scales across micro-frontends, ensuring consistency without shared CSS tooling, and what metrics would you track to measure success?

Follow-up Questions

❓What happens if the form input is valid but the user hasn't interacted with it yet?
❓How would you style a field that's required but empty versus one that has invalid content?
❓Can you style invalid inputs differently across browsers? What's your fallback?